<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <script src="/js/jquery-1.11.3.min.js"></script>
    <title>Dashboard Template for Bootstrap</title>
    <script src="/js/dropdown.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/ace-extra.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link rel="stylesheet" href="/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- Custom styles for this template -->
    <link href="/css/dashboard.css" rel="stylesheet">

    <!-- text fonts -->
    <link rel="stylesheet" href="/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
<!--    <link rel="stylesheet" href="/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />-->

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="/css/ace-skins.min.css" />
    <link rel="stylesheet" href="/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->


    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <script src="/js/jquery-2.1.4.min.js"></script>
    <!--[if lte IE 8]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>

<body>
<div th:replace="/catalog/header"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li ><a href="/catalog/main">
                    <i class="glyphicon glyphicon-globe" aria-hidden="true"> </i>
                    Main </a></li>

                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-check" aria-hidden="true"> </i>
                        Manage
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/order/allOrder">Order</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/catalog/item">Catalog</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/account/account">Account</a></li>
                    </ul>
                </li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-user" aria-hidden="true"> </i>
                        Manager
                        <span class="sr-only">(current)</span>
                        <span class="caret"></span>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="/manager/profile">Check</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/manager/managerchange">Change</a></li>
                    </ul>
                </li>
            </ul>
        </div>



<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li class="">
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a class="page-header" href="/catalog/main">主页</a>
                </li>
                <li class="active">
                    品目管理
                </li>
            </ul><!-- /.breadcrumb -->
        </div>

</div>
    <div class="page-header">


        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="tabbable">
                    <ul class="nav nav-tabs padding-18 tab-size-bigger" id="myTab">
                        <li class="active">
                            <a data-toggle="tab" href="#faq-tab-1">
                                <i class="blue ace-icon fa fa-inbox bigger-120"></i>
                                货物列表
                            </a>
                        </li>

                        <li>
                            <a data-toggle="tab" href="#faq-tab-2">
                                <i class="green ace-icon fa fa-pencil-square-o bigger-120"></i>
                                货物管理
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#faq-tab-3">
                                <i class="green ace-icon fa fa-pencil-square-o bigger-120"></i>
                                货物查询
                            </a>
                        </li>
                    </ul>



                    <div class="tab-content no-border padding-24">
                        <div id="faq-tab-3" class="tab-pane fade">

                            <div class="row">
                                <div class="col-xs-12">
                                    <!-- PAGE CONTENT BEGINS -->
                                    <div id="SearchContent">

                                        <input type="text" id="keyword" size="14"/>

                                        <button id="searchProducts" class="btn btn-info" type="button">
                                            <i class="ace-icon fa fa-check bigger-110"></i>
                                            搜索
                                        </button>

                                    </div>
                                    <table id="grid-table"></table>

                                    <!-- PAGE CONTENT ENDS -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div>
                        <div id="faq-tab-1" class="tab-pane fade in active">

                            <div class="row">
                                <div class="col-xs-12">
                                    <!-- PAGE CONTENT BEGINS -->
                                    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="center">
                                                <label class="pos-rel">
<!--                                                    <input type="checkbox" class="ace" />-->
                                                    <span class="lbl"></span>
                                                </label>
                                            </th>
                                            <th></th>
                                            <th>商品编号</th>
                                            <th>商品种类</th>
                                            <th>商品名称</th>
                                            <th>商品描述</th>

                                            <th></th>
                                        </tr>
                                        </thead>

                                        <tbody th:each="product:${productList}">
                                        <tr >
                                            <td class="center">
                                                <label class="pos-rel">
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl"></span>
                                                </label>
                                            </td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a href="#" class="green bigger-140 show-details-btn" title="详细信息">
                                                        <i class="ace-icon fa fa-angle-double-down"></i>
                                                        <span class="sr-only">详细信息</span>
                                                    </a>
                                                </div>
                                            </td>

                                            <td id="table_productId" th:text="${product.productId}"></td>
                                            <td id="table_categoryId" th:text="${product.categoryId}"></td>
                                            <td id="table_name" th:text="${product.name}"></td>
                                            <td id="table_description" th:utext="${product.description}"></td>


                                            <td>
                                                <div class="hidden-sm hidden-xs action-buttons">


                                                    <a id="product-edit" class="green" href="#">
                                                        <i  class="ace-icon fa fa-pencil bigger-130"></i>
                                                    </a>

                                                    <a id="delete" class="red" href="#">
                                                        <i  class="ace-icon fa fa-trash-o bigger-130"></i>
                                                    </a>
                                                </div>

                                                <div class="hidden-md hidden-lg">
                                                    <div class="inline pos-rel">
                                                        <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                                            <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                                        </button>

                                                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                                            <li>
                                                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                            <span class="green">
                                                               <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                                            </span>
                                                                </a>
                                                            </li>

                                                            <li>
                                                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                            <span class="red">
                                                               <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                            </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>



                                    </table>

                                    <div id="grid-pager"></div>
                                    <!-- PAGE CONTENT ENDS -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div>

                        <div id="faq-tab-2" class="tab-pane fade">
                            <div class="col-sm-offset-1 col-sm-10">

                                <div class="form-horizontal">
                                    <div class="tabbable">
                                        <ul class="nav nav-tabs padding-16">
                                            <li>
                                                <a id="tab_1" data-toggle="tab" href="#edit-category">
                                                    种类添加
                                                </a>
                                            </li>

                                            <li>
                                                <a id="tab_2" data-toggle="tab" href="#edit-item">
                                                    物品添加
                                                </a>
                                            </li>
                                            <li>
                                                <a id="tab_3" data-toggle="tab" href="#edit-product">
                                                    货物添加
                                                </a>
                                            </li>
                                        </ul>

                                        <div id="tab-content" class="tab-content profile-edit-tab-content">
                                            <div class="space-10"></div>
                                            <div id="edits" class="tab-pane active">

                                            </div>

                                            <div id="edit-category" class="tab-pane active">
                                                <div class="space-10"></div>


                                                <form id="tab_form1" action="/addcategory" method="post">

                                                    <div class="form-group">

                                                        <label class="col-sm-3 control-label no-padding-right">种类编号</label>

                                                        <div class="col-sm-9">
                                                            <input type="text" id="form-field-categoryId" name="categoryId" placeholder="英文大写" onkeyup="copyob1toob2()" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">种类名称</label>

                                                        <div class="col-sm-9">
                                                            <input type="text" id="form-field-categoryName" name="categoryName" readonly />
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">种类图片</label>

                                                        <div class="col-sm-9">
                                                            <input class="col-sm-5" type="text" id="form-field-descn" name="categoryDescn" placeholder="图片位置" value="<image src='/images/birds_icon.gif'><font size='5' color='blue'> Birds</font>"/>
                                                        </div>
                                                    </div>

                                                </form>

                                            </div>

                                            <div id="edit-item" class="tab-pane">

                                                <form id="tab_form2" action="/additem" method="post" >


                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-itemId">物品编号</label>

                                                        <div class="col-sm-9">
                                                            <input name="itemId" class="col-sm-5" type="text" id="form-field-itemId" placeholder="格式：XXX-XX" />
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">物品种类</label>
                                                        <div class="col-sm-9">
                                                            <select name="productId" id="form-field-productType" class="col-sm-5">
                                                            </select>
                                                        </div>

                                                    </div>
                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-unitcost">物品成本</label>

                                                        <div class="col-sm-9">
                                                            <input name="unitcost" class="col-sm-5" type="text" id="form-field-unitcost" placeholder="成本" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-listprice">物品售价</label>

                                                        <div class="col-sm-9">
                                                            <input name="listprice" class="col-sm-5" type="text" id="form-field-listprice" placeholder="售价" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-supplier">物品供应商</label>

                                                        <div class="col-sm-9">
                                                            <input name="supplier" class="col-sm-5" type="text" id="form-field-supplier" placeholder="1" />
                                                        </div>
                                                    </div>
                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-status">物品数量</label>

                                                        <div class="col-sm-9">
                                                            <input name="quantity" class="col-sm-5" type="text" id="form-field-quantity" placeholder="" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-status">物品状态</label>

                                                        <div class="col-sm-9">
                                                            <input name="status" class="col-sm-5" type="text" id="form-field-status" placeholder="" value="P"/>
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-attr">物品信息</label>

                                                        <div class="col-sm-9">
                                                            <input name="attr" class="col-sm-5" type="text" id="form-field-attr" placeholder="" value=""/>
                                                        </div>
                                                    </div>

                                                </form>

                                            </div>
                                            <div id="edit-product" class="tab-pane">
                                                <form id="tab_form3" action="/addproduct" method="post" >

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">货物种类</label>
                                                        <div class="col-sm-9">
                                                            <select name="categoryId" id="form-field-categoryType" class="col-sm-2">
                                                            </select>
                                                        </div>

                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">货物名称</label>

                                                        <div class="col-sm-9">
                                                            <input name="name" class="col-sm-2" type="text" id="form-field-name" placeholder="" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">货物编号</label>

                                                        <div class="col-sm-9">
                                                            <input name="productId" class="col-sm-2" type="text" id="form-field-pruductId" placeholder="格式：XX-XX-XX" />
                                                        </div>
                                                    </div>

                                                    <div class="space-4"></div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right">货物描述</label>

                                                        <div class="col-sm-9">
                                                            <input name="description" class="col-sm-5" type="text" id="form-field-description" placeholder="图片位置+描述"/>
                                                        </div>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix form-actions">
                                        <div class="col-md-offset-3 col-md-9">
                                            <button id="tab-submit" class="btn btn-info" type="button">
                                                <i class="ace-icon fa fa-check bigger-110"></i>
                                                提交
                                            </button>

                                            &nbsp; &nbsp;
                                            <button id="tab-reset" class="btn" type="reset">
                                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                                重置
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>
    </div><!-- /.main-content -->


<!-- /.main-container -->

<!-- basic scripts -->
<div id="modal-table2" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    商品信息
                </div>
            </div>

            <div class="modal-body no-padding">
                <div class="hr hr-dotted"></div>
                <form action="/updateproduct" method="post" id="update_productfrom" class="form-horizontal" th:object="${updateProduct}">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品编号:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">
                                <input th:field="*{productId}" id="modal2_productId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
                            </div>
                        </div>
                    </div>

                    <div class="hr hr-dotted"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品类型:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">

                                <input th:field="*{categoryId}" id="modal2_categoryId" class="col-xs-12 col-sm-6" type="text" >

                            </div>
                        </div>
                    </div>

                    <div class="space-2"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品名称:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">
                                <input th:field="*{name}" id="modal2_name" class="col-xs-12 col-sm-6" type="text">
                            </div>
                        </div>
                    </div>

                    <div class="hr hr-dotted"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品描述:</label>

                        <div class="col-xs-12 col-sm-9">

                            <div class="clearfix">
                                <input  th:field="*{description}" id="modal2_description" class="input-small" type="text" >

                            </div>
                        </div>
                    </div>

                    <hr>
                </form>
            </div>

            <div class="modal-footer no-margin-top">
                <button id="product-success" class="btn btn-sm btn-success pull-left" data-last="Finish">
                    <i class="ace-icon fa fa-check"></i>
                    提交
                </button>
                <button class="btn btn-sm btn-danger" data-dismiss="modal">
                    <i class="ace-icon fa fa-times"></i>
                    关闭
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- basic scripts -->

<div id="modal-table1" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    商品信息
                </div>
            </div>

            <div class="modal-body no-padding">
                <div class="hr hr-dotted"></div>
                <form >
                    <table  class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>物品编号</th>
                            <th>售价</th>
                            <th>成本</th>
                            <th>供应商</th>
                            <th>状态</th>
                            <th>属性</th>
                            <th>数量</th>
                            <th>操作</th>

                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="inner_table">

                        </tbody>

                    </table>
                </form>
            </div>

            <div class="modal-footer no-margin-top">
                <button class="btn btn-sm btn-success pull-left" data-last="Finish" data-dismiss="modal">
                    <i class="ace-icon fa fa-check"></i>
                    提交
                </button>
                <button class="btn btn-sm btn-danger" data-dismiss="modal">
                    <i class="ace-icon fa fa-times"></i>
                    关闭
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- basic scripts -->
<div id="modal-table3" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    商品信息
                </div>
            </div>

            <div class="modal-body no-padding">
                <div class="hr hr-dotted"></div>
                <form action="/updateitem" method="post" id="update_itemfrom" class="form-horizontal" th:object="${updateItem}">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品编号:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">
                                <input th:field="*{itemId}" id="modal3_itemId" class="col-xs-12 col-sm-6" type="text" readonly="readonly">
                            </div>
                        </div>
                    </div>

                    <div class="hr hr-dotted"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品售价:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">

                                <input th:field="*{listPrice}" id="modal3_listPrice" class="col-xs-12 col-sm-6" type="text" >

                            </div>
                        </div>
                    </div>

                    <div class="space-2"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品成本:</label>

                        <div class="col-xs-12 col-sm-9">
                            <div class="clearfix">
                                <input th:field="*{unitCost}" id="modal3_unitCost" class="col-xs-12 col-sm-6" type="text">
                            </div>
                        </div>
                    </div>

                    <div class="hr hr-dotted"></div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品供应商:</label>

                        <div class="col-xs-12 col-sm-9">

                            <div class="clearfix">
                                <input  th:field="*{supplierId}" id="modal3_supplierId" class="input-small" type="text" >

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品状态:</label>

                        <div class="col-xs-12 col-sm-9">

                            <div class="clearfix">
                                <input  th:field="*{status}" id="modal3_status" class="input-small" type="text" >

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品描述:</label>

                        <div class="col-xs-12 col-sm-9">

                            <div class="clearfix">
                                <input  th:field="*{attribute1}" id="modal3_attribute1" class="input-small" type="text" >

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">商品数量:</label>

                        <div class="col-xs-12 col-sm-9">

                            <div class="clearfix">
                                <input  th:field="*{quantity}" id="modal3_quantity" class="input-small" type="text" >

                            </div>
                        </div>
                    </div>

                    <hr>
                </form>
            </div>

            <div class="modal-footer no-margin-top">
                <button id="item-success" class="btn btn-sm btn-success pull-left" data-last="Finish" >
                    <i class="ace-icon fa fa-check"></i>
                    提交
                </button>
                <button class="btn btn-sm btn-danger" data-dismiss="modal">
                    <i class="ace-icon fa fa-times"></i>
                    关闭
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!--[if !IE]> -->
<script src="/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="/js/bootstrap.min.js"></script>
    <script src="/js/dropdown.js"></script>
<!-- page specific plugin scripts -->
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/jquery.jqGrid.min.js"></script>
<script src="/js/grid.locale-en.js"></script>
<!-- ace scripts -->
<script src="/js/ace-elements.min.js"></script>
<script src="/js/ace.min.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">









    function copyob1toob2(){
        var categoryId = document.getElementById("form-field-categoryId");
        categoryId = categoryId.value;
        categoryId = categoryId.split("");
        for (var i = 1;i <categoryId.length;i++){
            categoryId[i]=categoryId[i].toLowerCase();
        }
        $("#form-field-categoryName").val(categoryId.join(""));
    }

    $(document).ready(function () { //此处页面打开即请求api
        $('#dynamic-table').delegate('.fa-trash-o','click',function(){
            var productId = $(this).closest('tr').find("td[id='table_productId']").text();
            $.ajax({
                type:"get",
                url:"/deleteproduct",
                data:{
                    "productId":productId
                },
                dataType:"text",

                success:function(data){
                    window.location.reload();//刷新当前页面
                     var url = this.href;
                    e.preventDefault();
                    $('#dynamic-table').load(url + " #dynamic-table");

                    $('#dynamic-table').reload();//刷新最顶端对象（用于多开窗口）
                    // window.location.href = "/updateproduct";
                    if (data == "fail"){

                    }else {
                        console.log(data);

                    }
                }
            });
        });
        $('#dynamic-table').delegate('.fa-pencil','click',function(){
            var productId = $(this).closest('tr').find("td[id='table_productId']").text();
            $.ajax({
                type:"get",
                url:"/getProduct",
                data:{
                    "productId":productId
                },
                dataType:"json",

                success:function(data){
                    $("#modal2_productId").val(data.productId);
                    $("#modal2_categoryId").val(data.categoryId);
                    $("#modal2_name").val(data.name);
                    $("#modal2_description").val(data.description);
                    $("#modal-table2").modal("show");
                     //window.location.reload();//刷新当前页面
                    // $('#dynamic-table');//刷新最顶端对象（用于多开窗口）
                    //window.location.href = "/updateproduct";
                }
            });
        });
        $('#product-success').on('click',function (e) {

          $('#update_productfrom').submit();
            // 	var url = this.href;
            // 	e.preventDefault();
            // 	$('#dynamic-table').load(url + " #dynamic-table");
            // window.location.reload()//刷新当前页面
           $('#dynamic-table').reload();//刷新最顶端对象（用于多开窗口）
            	//window.location.href = "/updateproduct";
        });

        $('#inner_table').delegate('.fa-trash-o','click',function(){
            var itemId = $(this).closest('tr').find("td[id='itemId']").text();
            $.ajax({
                type:"get",
                url:"/deleteitem",
                data:{
                    "itemId":itemId
                },
                dataType:"text",

                success:function(data){
                    window.location.reload()//刷新当前页面
                    var url = this.href;
                    e.preventDefault();
                    $('#dynamic-table').load(url + " #dynamic-table");

                    $('#dynamic-table').reload();//刷新最顶端对象（用于多开窗口）
                    window.location.href = "/updateproduct";
                    if (data == "fail"){

                    }else {
                        console.log(data);

                    }
                }
            });
        });
        $('#inner_table').delegate('.fa-pencil','click',function(){
            var itemId = $(this).closest('tr').find("td[id='itemId']").text();
            $.ajax({
                type:"get",
                url:"/getitem",
                data:{
                    "itemId":itemId
                },
                dataType:"json",

                success:function(data){
                    $("#modal3_itemId").val(data.itemId);
                    $("#modal3_attribute1").val(data.attribute1);
                    $("#modal3_listPrice").val(data.listPrice);
                    $("#modal3_status").val(data.status);
                    $("#modal3_supplierId").val(data.supplierId);
                    $("#modal3_unitCost").val(data.unitCost);
                    $("#modal3_quantity").val(data.quantity);
                    $("#modal-table3").modal("show");

                }
            });
        });
        $('#item-success').on('click',function (e) {

           $('#update_itemfrom').submit();
            	//var url = this.href;
            	//e.preventDefault();
            	//$('#dynamic-table').load(url + " #dynamic-table");
           //window.location.reload();//刷新当前页面
            	$('#dynamic-table');//刷新最顶端对象（用于多开窗口）
            	//window.location.href = "/catalog/item";



        });
        $('#searchProducts').on('click',function (e) {

            var keyword= $('#keyword').val();
            var grid_selector = "#grid-table";
            jQuery(grid_selector).jqGrid('clearGridData');
            jQuery(grid_selector).jqGrid('setGridParam',{
                url:'/getProducts',//请求数据的地址
                datatype: "json",
                postData : {
                    keyword :keyword
                    //$("keyword").innerText
                },
                height: 450,

            }).trigger('reloadGrid');
        });

        $.ajax({
            type:'GET',
            url:"/getcategory",
            dataType: "json",
            success: function (data) {
                var optionstring = "";
                for (var j = 0; j < data.length;j++) {
                    optionstring += "<option value=\"" + data[j].categoryId + "\" >" +data[j].name + "</option>";
                    $("#form-field-categoryType").html(optionstring);
                }
            },

            error: function (msg) {
                layer.msg('数据出错了!!');
            }
        });
        $.ajax({
            type:'GET',
            url:"/getproducts",
            dataType: "json",
            success: function (data) {
                var optionstring = "";
                for (var j = 0; j < data.length;j++) {
                    optionstring += "<option value=\"" + data[j].productId + "\" >" +data[j].name + "</option>";
                    $("#form-field-productType").html(optionstring);
                }
            },

            error: function (msg) {
                layer.msg('数据出错了!!');
            }
        });
    });

    jQuery(function($) {


        var tabIndex = 1;
        var grid_selector = "#grid-table";

        jQuery(grid_selector).jqGrid({

            url:'/getProducts',//请求数据的地址
            datatype: "json",
            postData : {
                keyword :"123"
                //$("keyword").innerText
            },
            height: 450,
            colNames:[' ', '货物编号','种类','名称', '描述'],
            colModel:[
                {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                    formatter:'actions',
                    formatoptions:{
                        keys:true,
                        //delbutton: false,//disable delete button

                        delOptions:{recreateForm: true},
                        //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                    }
                },
                {name:'productId',index:'productId', width:120, editable: false},
                {name:'categoryId',index:'categoryId',width:120, editable:true, edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
                {name:'name',index:'name', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
                {name:'description',index:'description', width:450, editable: true,editoptions: {size:"20",maxlength:"50"}},
            ],

            viewrecords : true,
            rowNum:10,
            rowList:[10,20,30],

            altRows: true,
            //toppager: true,

            multiselect: true,
            //multikey: "ctrlKey",
            multiboxonly: true,

            loadComplete : function() {
                var table = this;
                setTimeout(function(){
                    styleCheckbox(table);
                    enableTooltips(table);
                }, 0);
            },

        });


        $("#tab-submit").on('click', function () {
            if (tabIndex === 1) {
                alert(tabIndex);
                $("#tab_form1").submit();
            } else if (tabIndex === 2) {
                $("#tab_form2").submit();
                alert(tabIndex);
            } else if (tabIndex === 3) {
                $("#tab_form3").submit();
                alert(tabIndex);
            }
        });

        $("#tab_1").on('click', function () {
            tabIndex = 1;
        });

        $("#tab_2").on('click', function () {
            tabIndex = 2;

        });

        $("#tab_3").on('click', function () {
            tabIndex = 3;

        });
    });



    //switch element when editing inline
    function aceSwitch( cellvalue, options, cell ) {
        setTimeout(function(){
            $(cell) .find('input[type=checkbox]')
                .addClass('ace ace-switch ace-switch-5')
                .after('<span class="lbl"></span>');
        }, 0);
    }
    //enable datepicker
    function pickDate( cellvalue, options, cell ) {
        setTimeout(function(){
            $(cell) .find('input[type=text]')
                .datepicker({format:'yyyy-mm-dd' , autoclose:true});
        }, 0);
    }

    function style_edit_form(form) {
        //enable datepicker on "sdate" field and switches for "stock" field
        form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

        form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
        //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
        //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


        //update buttons classes
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
        buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

        buttons = form.next().find('.navButton a');
        buttons.find('.ui-icon').hide();
        buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
        buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
    }

    function style_delete_form(form) {
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
        buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
    }

    function style_search_filters(form) {
        form.find('.delete-rule').val('X');
        form.find('.add-rule').addClass('btn btn-xs btn-primary');
        form.find('.add-group').addClass('btn btn-xs btn-success');
        form.find('.delete-group').addClass('btn btn-xs btn-danger');
    }
    function style_search_form(form) {
        var dialog = form.closest('.ui-jqdialog');
        var buttons = dialog.find('.EditTable')
        buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
        buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
        buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
    }

    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container:'body'});
        $(table).find('.ui-pg-div').tooltip({container:'body'});
    }
    // });

    $('.show-details-btn').on('click', function(e) {
        e.preventDefault();
        //	$(this).closest('tr').next().toggleClass('open');
        //	$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
        var productId = $(this).closest('tr').find("td[id='table_productId']").text();
        console.log(productId);
        $.ajax({
            type:"get",
            url:"/getitems",
            data:{
                "productId":productId
                //{content:$('#table_productId').val()}
            },
            dataType:"text",

            success:function(data){
                if (data == "fail"){

                }else {
                    $("#modal-table1").modal("show");
                    //	console.log(data);
                    //	alert(data);
                    var json=eval("("+data+")");
                    //alert(json.Supplier);
                    $('#inner_table').empty();
                    for(var i=0;i<json.length;i++)
                    {
                        $('#inner_table').append(
                            "<tr>"+
                            "<td id='itemId'>" + json[i].itemId + "</td>" +
                            "<td >" +json[i].listPrice +"</td>"+
                            "<td >" + json[i].unitCost +"</td>"+
                            "<td >" + json[i].supplierId +"</td>"+

                            "<td >" + json[i].status +"</td>"+

                            "<td>" + json[i].attribute1 +"</td>"+
                            "<td>" + json[i].quantity +"</td>"+"<td>"+"\t\t<div class=\"hidden-sm hidden-xs action-buttons\">\n" +
                            "\n" +
                            "\n" +
                            "\t<a  class=\"green\" href=\"#\">\n" +
                            "\t<i  class=\"ace-icon fa fa-pencil bigger-130\"></i>\n" +
                            "\t</a>\n" +
                            "\n" +
                            "\t<a  class=\"red\" href=\"#\">\n" +
                            "\t<i  class=\"ace-icon fa fa-trash-o bigger-130\"></i>\n" +
                            "\t</a>\n" +
                            "\t</div>\n" +
                            "\n" +
                            "\t<div class=\"hidden-md hidden-lg\">\n" +
                            "\t<div class=\"inline pos-rel\">\n" +
                            "\t<button class=\"btn btn-minier btn-yellow dropdown-toggle\" data-toggle=\"dropdown\" data-position=\"auto\">\n" +
                            "\t<i class=\"ace-icon fa fa-caret-down icon-only bigger-120\"></i>\n" +
                            "\t</button>\n" +
                            "\n" +
                            "\t<ul class=\"dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close\">\n" +
                            "\n" +
                            "\t<li>\n" +
                            "\t<a href=\"#\" class=\"tooltip-success\" data-rel=\"tooltip\" title=\"Edit\">\n" +
                            "                                                            <span class=\"green\">\n" +
                            "                                                               <i class=\"ace-icon fa fa-pencil-square-o bigger-120\"></i>\n" +
                            "                                                            </span>\n" +
                            "\t</a>\n" +
                            "\t</li>\n" +
                            "\n" +
                            "\t<li>\n" +
                            "\t<a href=\"#\" class=\"tooltip-error\" data-rel=\"tooltip\" title=\"Delete\">\n" +
                            "                                                            <span class=\"red\">\n" +
                            "                                                               <i class=\"ace-icon fa fa-trash-o bigger-120\"></i>\n" +
                            "                                                            </span>\n" +
                            "\t</a>\n" +
                            "\t</li>\n" +
                            "\t</ul>\n" +
                            "\t</div>\n" +
                            "\t</div>"+"</td>"+"</tr>"

                        );
                    }

                  //	window.location.href = "/catalog/item";//指向登录的页面地址
                }
            }
        });
    });



</script>
</div>
</body>
</html>
<!-- inline scripts related to this page -->
<!-- inline scripts related to this page -->

